<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<div class="container">
  <div *ngFor="let label of value; let i = index" class="row">
    <!-- Key -->
    <nz-select
      [(ngModel)]="value[i].key"
      (ngModelChange)="onKeyChange(i, $event)"
      [nzMode]="'default'"
      [nzShowSearch]="true"
      [nzServerSearch]="true"
      (nzOnSearch)="onSearch($event, i, 'key')"
      [nzAllowClear]="true"
      [nzPlaceHolder]="'placeholder.key' | i18n"
    >
      <nz-option *ngFor="let keyOption of labelKeys" [nzLabel]="keyOption" [nzValue]="keyOption"></nz-option>
      <nz-option
        *ngIf="customInputKey && !hasMatchingOption(customInputKey, labelKeys)"
        [nzLabel]="customInputKey"
        [nzValue]="customInputKey"
      ></nz-option>
    </nz-select>

    <span class="separator">:</span>

    <!-- Value -->
    <nz-select
      [(ngModel)]="value[i].value"
      (ngModelChange)="onValueChange(i, $event)"
      [nzMode]="'default'"
      [nzShowSearch]="true"
      [nzServerSearch]="true"
      (nzOnSearch)="onSearch($event, i, 'value')"
      [nzAllowClear]="true"
      [nzPlaceHolder]="'placeholder.value' | i18n"
    >
      <nz-option *ngFor="let valueOption of getLabelValues(value[i].key)" [nzLabel]="valueOption" [nzValue]="valueOption"></nz-option>
      <nz-option
        *ngIf="customInputValue && !hasMatchingOption(customInputValue, getLabelValues(value[i].key))"
        [nzLabel]="customInputValue"
        [nzValue]="customInputValue"
      ></nz-option>
    </nz-select>

    <!-- btn -->
    <div class="btns">
      <button nz-button nzSize="small" *ngIf="value.length > 1" (click)="removeItem(i, $event)">
        <i nz-icon nzType="minus" nzTheme="outline"></i>
      </button>
      <button nz-button nzSize="small" (click)="addItem($event)">
        <i nz-icon nzType="plus" nzTheme="outline"></i>
      </button>
    </div>
  </div>
</div>
